<template>
  <div id="SystemInf">
    <a-table
      :scroll="{ y: 580 }"
      :columns="columns"
      style="margin-top: 16px"
      :data-source="tableData"
      :pagination="tablePagination"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :rowKey="(record, index) => index"
      @change="handleTableChange"
    >
      <template slot="name" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.name">
          <template slot="title">
            <span>{{ record.name }}</span>
          </template>
          <span style="cursor: default">{{ record.name }}</span>
        </a-tooltip>
        <span v-else-if="!record.name">—</span>
      </template>
      <template slot="tapdProjectId" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.tapdProjectId">
          <template slot="title">
            <p>{{ record.tapdProjectId }}</p>
          </template>
          <span style="cursor: default">{{ record.tapdProjectId }}</span>
        </a-tooltip>
        <span v-else-if="!record.tapdProjectId">—</span>
      </template>
    </a-table>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      selectedRowKeys: [],
      columns: [
        //主页table列的配置
        {
          title: "使用人姓名",
          dataIndex: "realName",
          customRender: (text, record) => {
            return record.realName ? record.realName : "—";
          },
        },
        {
          title: "使用人所属类别",
          dataIndex: "roleName",
          customRender: (text, record) => {
            return record.roleName ? record.roleName : "—";
          },
        },
        {
          title: "登录系统时间",
          dataIndex: "loginTime",
          customRender: (text, record) => {
            return record.loginTime ? record.loginTime : "—";
          },
        },
        {
          title: "登出系统时间",
          dataIndex: "logoutTime",
          customRender: (text, record) => {
            return record.logoutTime ? record.logoutTime : "—";
          },
        },
        {
          title: "使用时长",
          dataIndex: "usedDuration",
          customRender: (text, record) => {
            return record.usedDuration ? record.usedDuration : "—";
          },
        },
        // {
        //   title: "保障维护",
        //   dataIndex: "actionLog",
        //   customRender: (text, record) => {
        //     return record.actionLog ? record.actionLog : "—";
        //   },
        // },
      ],
      tableData: [
        //主页表格的数据
      ],
      tablePagination: {
        //主页表格的分页器
        total: 0,
        current: 1,
        pageSize: 10,
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    handleTableChange(pagination, filters, sorter){
      this.tablePagination.current=pagination.current;
      this.tablePagination.pageSize=pagination.pageSize;
      this.getData();
    },
    async getData() {
      this.$axios
        .get("/run/login/page/list", {
          params: {
            page: this.tablePagination.current,
            size: this.tablePagination.pageSize,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.records;
            this.tablePagination.total = res.data.total;
          }
        });
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>
  
  <style>
</style>